<template>
  <div
    @mouseover="mouseOver4CardMg($event)"
    @mouseleave="mouseLeave4CardMg($event)"
    class="card-mg-menu">

      <ul>
        <li @click="onUpTopCard">
          <p class="card-mg-menu-item"> <el-icon><top /></el-icon><span>置顶</span> </p>
        </li>
        <li @click="onUpCard">
          <p class="card-mg-menu-item"> <el-icon><arrow-up /></el-icon> <span>上移</span> </p>
        </li>
        <li v-if="groupEditable" @click="onEditCardGroup">
          <p class="card-mg-menu-item"> <el-icon><setting /></el-icon> <span>编辑列表</span> </p>
        </li>
        <li @click="onDownCard">
          <p class="card-mg-menu-item"> <el-icon><arrow-down /></el-icon> <span>下移</span> </p>
        </li>
        <li @click="onDownBottomCard">
          <p class="card-mg-menu-item"> <el-icon><bottom /></el-icon> <span>置底</span> </p>
        </li>
      </ul>

      <ul>
        <li v-if="treeEditable">

            <!-- 移动至 -->
            <div v-if="bIsMoveable" class="card-mg-moveto">

              <ul>
                <li :key="node.index" v-for="node in tree">
                  <p class="card-mg-moveto-item">
                    <el-icon><tickets /></el-icon> <span @click="onMoveCardTo(node)"> {{node.label}} </span>
                  </p>

                  <div v-if="node.children">
                    <ul>
                      <li :key="node.index + '_' + child.index" v-for="child in node.children">
                        <p class="card-mg-moveto-item">
                          <i style="margin-left: 22px;"></i>
                          <el-icon><files /></el-icon>
                          <span @click="onMoveCardTo(node, child)"> {{child.label}} </span>
                        </p>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>

            </div>

            <p class="card-mg-menu-item" @click="bIsMoveable=!bIsMoveable"> <el-icon><position /></el-icon> <span>移动至</span> </p>

        </li>
        <li @click="onDeleteCard">
          <p class="card-mg-menu-item"> <el-icon><delete /></el-icon><span>删除</span> </p>
        </li>
      </ul>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        bIsMoveable: false,
      }
    },
    props: {
      groupEditable: {
        type: Boolean,
        default: false
      },
      treeEditable: {
        type: Boolean,
        default: false
      },
      tree: {
        type: Array,
        default: []
      },
    },
    methods: {
      /* update */  // 交给父级处理逻辑
      onDeleteCard() {
        this.$emit('onDeleteCard');
      },
      onEditCardGroup() {
        this.$emit('onEditCardGroup');
      },
      onUpCard() {
        this.$emit('onUpCard');
      },
      onUpTopCard() {
        this.$emit('onUpTopCard');
      },
      onDownCard() {
        this.$emit('onDownCard');
      },
      onDownBottomCard() {
        this.$emit('onDownBottomCard');
      },
      onMoveCardTo(node, child) {
        // console.log(node, child);
        this.bIsMoveable = false;
        this.$emit('onMoveCardTo', node, child);
      },

      /* mg & menu */  // 交给父级处理逻辑
      mouseOver4CardMg(e) {
        this.$emit('mouseOver4CardMg', e);
      },
      mouseLeave4CardMg(e) {
        this.$emit('mouseLeave4CardMg', e);
      },
    },
  }
</script>

<style lang="scss">
  .card-mg-menu {
    position: relative;
    // position: fixed;
    // right: -120px;
    // width: 100px;
    // height: 200px;
    // background: #fff;
    // box-shadow: 0 4px 4px 0 rgba(18, 123, 255, 0.1);
    // border-radius: 2px;
    color: #127bff;
    // transform: translateY(-50%);
    z-index: 99;

    display: flex;
    align-items: flex-end;

    ul {
      position: relative;
      background: #fff;
      border-right: 1px dashed #eee;
      z-index: 1;
    }
    ul:last-child {
      border-right: none;
    }

    .card-mg-menu-item, .card-mg-moveto-item {
      position: relative;
      display: flex;
      align-items: center;
      text-align: center;
      padding: 10px 10px;
      cursor: pointer;
      // border-bottom: 5px solid #f2f2f2;
      white-space: nowrap;

      i {
        font-size: 16px;
        cursor: inherit;
      }

      span {
        padding-left: 8px;
        display: block;
        font-size: 12px;
        cursor: inherit;
      }

      &:hover {
        background: #ecf5ff;
      }
      &:active {
        color: #fff;
        background: #127bff;
      }
    }

    .card-mg-moveto {
      position: absolute;
      // width: 100px;
      left: 100%;
      top: 0;
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      margin-left: 12px;
    }
    .card-mg-moveto::before {
      position: absolute;
      content: '';
      border-width: 6px;
      border-style: solid;
      border-color: transparent;
      border-right-color: #fff;
      border-left-width: 0;
      top: 10px;
      left: -5px;
      z-index: 0;
    }
  }
</style>
